<template>
	<view class="container">
		<tablist :data="tabList" :index="tabIndex" @result="tabResult"></tablist>
		<view class="list">
			<noempty v-if="list.length == 0"></noempty>
			<view class="p-l20 p-r20 p-b30" v-else>
				<view v-for="(item,key) in list" class="list_item bg-white p-30 m-b30 round-10">
					<view>
						<view class="uni-flex justify-space-between p-b20">
							<view class="fs16 fw600 w-80">{{item.title || ""}}</view>
							<view class="fs14 text-redeb">{{stateList[item.state]}}</view>
						</view>
						<view class="fs12 m-b20">提交时间：{{item.create_time || ""}}</view>
						<view class="fs12 m-b20">问题描述：{{item.content || ""}}</view>
						<view class="imgs uni-flex justify-left flex-auto-row m-b20" v-if="item.images && item.images.length > 0">
							<view class="imgs_item m-r10 bg-grayf5 m-t10" v-for="(img,imgk) in item.images">
								<image :src="img" mode="aspectFill" v-if="img" @click="viewImage(item.images, imgk)"></image>
							</view>
						</view>
						<template v-if="item.active == true">
							<view class="fs12 m-b20">回复时间：{{item.update_time || ""}}</view>
							<view class="fs12 m-b20">回复内容：{{item.reply || ""}}</view>
							<view class="imgs uni-flex justify-left flex-auto-row m-b20" v-if="item.replyimages && item.replyimages.length > 0">
								<view class="imgs_item m-r10 bg-grayf5 m-t10" v-for="(img,imgk) in item.replyimages">
									<image :src="img" mode="aspectFill" v-if="img" @click="viewImage(item.replyimages, imgk)"></image>
								</view>
							</view>
						</template>
						<view class="text-center p-t20 p-b20" @click="viewMore(key)" v-if="item.state == 3">
							<view :class="'iconfont icon-more fs12 '+(item.active==true ? 'more_top' : '')"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="formBtn bg-blue round-40 text-white" @click="goPage">申请售后</button>
	</view>
</template>

<script>
import { salesList } from "@/api/aftersales.js"
import urlConfig from '@/common/config.js'
export default {
	data() {
		return {
			sub_dh: "",
			tabIndex: 0,
			tabList: [
				{value: '-1', text: '全部'},
				{value: '0', text: '待处理'},
				{value: '10', text: '处理中'},
				{value: '3', text: '已处理'}
			],
			stateList:['待处理','处理中','处理中','已处理'],
			loading: true,
			page: 1,
			size: 20,
			total: 0,
			list: []
		}
	},
	onLoad(e) {
		this.CustomerNo = e.CustomerNo ? e.CustomerNo : ""
		this.getList()
	},
	onReachBottom(e){
		this.page++
		this.getList()
	},
	onPullDownRefresh(){
		this.loading = true
		this.page = 1
		this.getList()
	},
	methods: {
		tabResult(index){
			this.page = 1
			this.loading = true
			this.tabIndex = index
			this.getList()
		},
		/**
		 * 获取列表
		 */
		getList(){
			let that = this
			if(!that.loading) return
			that.loading = false
			let state = that.tabList[that.tabIndex]['value']
			let params = {
				"CustomerNo": that.CustomerNo,
				"state": state,
				"page": that.page,
				"size": that.size
			}
			salesList(params).then((res) => {
				const { data } = res
				let list = []
				if(that.page == 1) list = data.list
				else list = [...that.list, ...data.list]
				that.list = list;
				that.total = data.total
				if(data.list.length > 0){
					that.loading = true
				}
			})
		},
		/**
		 * 意见反馈
		 */
		goPage() {
			uni.navigateTo({
				url: `/pages/mine/salesform?CustomerNo=${this.CustomerNo}`
			})
		},
		/**
		 * 查看更多
		 */
		viewMore(index) {
			let that = this
			let current = that.list[index]
			let active = current.active==true ? false : true;
			that.$set(that.list[index],'active', active)
		},
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		}
	}
}
</script>

<style>
.tab_list {
	width: 100%;
	position: fixed;
	z-index: 10;
	background: #fff;
	top: 0;
}
.list {
	margin-top: 92rpx;
}
.img_item {
	width: 150rpx;
	height: 150rpx;
}
.formBtn {
	bottom: 100rpx;
	position: fixed;
	width: 90%;
	margin-left: 7%;
}
.more_top {
	transform: rotate(180deg);
}
</style>
